<template>
  <page-header-wrapper>
    <!--    <template #extra>-->
    <!--      <a-button type="primary" v-if="!updateActionDate.state" @click="toStartEdit">-->
    <!--        修改-->
    <!--      </a-button>-->
    <!--      <a-button type="primary" style="margin-left: 10px"-->
    <!--                v-if="updateActionDate.state">-->
    <!--        保存-->
    <!--      </a-button>-->
    <!--      <a-button type="primary" style="margin-left: 10px"-->
    <!--                v-if="updateActionDate.state"-->
    <!--                @click="toCancelEdit"-->
    <!--      >-->
    <!--        返回-->
    <!--      </a-button>-->
    <!--    </template>-->
    <div class="table-page-search-wrapper">
      <a-card title="订单运费配置" :loading="updateFreightActionDate.data==null">
        <template #extra>
          <a-button type="primary" @click="openModal(null)">添加</a-button>
        </template>
        <div v-if="updateFreightActionDate.data!=null">
          <a-table
            :data-source="data" :loading="freightLoading"
            :columns="columns">
            <span slot="action" slot-scope="text,scope">
              <a-button type="link" size="small" @click="openModal(scope)">修改</a-button>
              <a-button v-if="scope.goodsPrice!=0" type="link" size="small"
                        @click="toDeleteFreight(scope.id)">删除</a-button>
            </span>
          </a-table>

        </div>
      </a-card>
      <a-card title="订单超时配置" :loading="specialValue.updateData==null" style="margin-top: 10px">
        <div v-if="specialValue.updateData!=null">
          <a-form layout="inline" v-if="specialValue.updateData!=null" :label-col="{ span: 7 }"
                  :wrapper-col="{ span: 15 }" style="width: 100%;">
            <a-form-item label="自动完成时间(天)" style="display: flex">
              <a-input-number type="number" :min="0" v-model="specialValue.updateData" :disabled="!specialValue.state"/>


              <a-button style="margin-left: 10px" type="primary" v-if="!specialValue.state" @click="changeSpecialState">修改</a-button>
              <a-button style="margin-left: 10px" type="primary" v-if="specialValue.state" @click="toSubmitSpecial">提交</a-button>
              <a-button style="margin-left: 10px" v-if="specialValue.state" @click="changeSpecialState">取消</a-button>


            </a-form-item>
          </a-form>
        </div>
      </a-card>
    </div>
  </page-header-wrapper>
</template>

<script>
import {
  addFreight,
  deleteFreightById,
  searchFreight, searchSpecial,
  updateFreightById,
  updateSpecial
} from "@/api/modules/FreightRequest";


const columns = [
  {
    "dataIndex": "id",
    "title": "ID"
  },
  {
    "dataIndex": "goodsPrice",
    "title": "最低商品价格(美元)",
  },
  {
    "dataIndex": "freightPrice",
    "title": "运费",
  },
  {
    "title": "操作",
    scopedSlots: {customRender: 'action'},
  },
]

export default {
  name: "OrderConfig",
  data() {
    return {
      freightLoading: false,
      updateFreightActionDate: {
        state: false,
        data: null
      },
      specialValue:{
        state:false,
        data:null,
        updateData:null
      },
      freightModalData: {
        state: false,
        orNum: null,
        data: null
      },
      columns: columns,
      data: null
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      this.toSearchFreight()
      this.toSearchSpecial()
    },
    async toSearchFreight() {
      if (this.freightLoading) return;
      this.freightLoading = true;
      let _this = this;
      await searchFreight().then((res) => {
        _this.data = res.data;
        _this.updateFreightActionDate.data = JSON.parse(JSON.stringify(res.data))
      }).finally(() => {
        this.freightLoading = false;
      })
    },
    async toSearchSpecial(){
      let _this = this;
      await searchSpecial().then((res) => {
        _this.specialValue.data = res.data.orderAutoFinish;
        _this.specialValue.updateData = res.data.orderAutoFinish;
      })
    },
    openModal(data) {
      if (data == null) {
        this.freightModalData.data = {
          id: null,
          goodsPrice: null,
          freightPrice: null
        }
        this.freightModalData.orNum = null
      } else {
        this.freightModalData.data = JSON.parse(JSON.stringify(data))
        this.freightModalData.orNum = this.freightModalData.data.goodsPrice;
      }
      this.freightModalData.state = true;
    },
    async toDeleteFreight(id) {
      let _this = this;
      this.$confirm({
        icon: 'warning',
        title: '确定删除？',
        onOk() {
          deleteFreightById(id).finally(() => {
            _this.toSearchFreight();
          })
        }
      })
    },
    async toSubmitFreightModal() {
      let _this = this;
      if (this.freightModalData.data.id == null) {
        await addFreight(this.freightModalData.data).then((res) => {
          if (res.status != 200) {
          }
          _this.$notification.warning({
            message: res.message
          })
        }).finally(() => {
          _this.toSearchFreight();
          _this.freightModalData.state = false
        })
      } else {
        await updateFreightById(this.freightModalData.data).then((res) => {
          if (res.status != 200) {
          }
          _this.$notification.warning({
            message: res.message
          })
        }).finally(() => {
          _this.toSearchFreight();
          _this.freightModalData.state = false
        })
      }
    },
    changeSpecialState(){
      if(this.specialValue.state==true){
        this.specialValue.updateData=this.specialValue.data
        this.specialValue.state=false
      }else {
        this.specialValue.state=true
      }
    },
    toSubmitSpecial(){
      if(this.specialValue.updateData!=null){
        let _this=this;
        updateSpecial(this.specialValue.updateData).then(()=>{
          _this.toSearchSpecial();
          _this.$notification.success({
            message:'提交成功'
          })
          _this.specialValue.state=false
        }).catch((res)=>{
          _this.$notification.warning({
            message:res.message
          })
        })
      }
    }
  }
}
</script>

<style scoped>

</style>